<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!</title>

<!-- 引入表格样式 -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- 引入漂亮的字体图标的 -->
<link rel="stylesheet" href="css/font-awesome.min.css">
</head>
<body>

<div id="app" class="container mt-3">


	<form id="form-query" class="form-inline" action="xxx">
	
		<div class="input-group my-2 mr-2">
		  <div class="input-group-prepend">
		    <span class="input-group-text">工号</span>
		  </div>
		  <input type="text" class="form-control" v-model="query.id" >
		</div>
		
		<div class="input-group my-2 mr-2">
		  <div class="input-group-prepend">
		    <span class="input-group-text">年龄</span>
		  </div>
		  <input type="text" class="form-control" v-model="query.age" >
		</div>
		
		<div class="input-group my-2 mr-2">
		  <div class="input-group-prepend">
		    <span class="input-group-text">入职日期</span>
		  </div>
		  <input type="date" class="form-control" v-model="query.date_start" >
		  <div class="input-group-prepend input-group-append">
		    <span class="input-group-text">至</span>
		  </div>
		  <input type="date" class="form-control" v-model="query.date_end" >
		</div>
		
		<div class="input-group my-2 mr-2">
		  <div class="input-group-prepend">
		    <span class="input-group-text">姓名</span>
		  </div>
		  <input type="text" class="form-control" v-model="query.name" >
		</div>
		
		<div class="input-group my-2 mr-2">
		  <div class="input-group-prepend">
		    <span class="input-group-text">工资</span>
		  </div>
		  <input type="number" class="form-control" v-model="query.money_start" >
		  <div class="input-group-prepend input-group-append">
		    <span class="input-group-text">至</span>
		  </div>
		  <input type="number" class="form-control" v-model="query.money_end" >
		</div>
		
		<div class="input-group my-2 mr-2">
			<button id="bn-query" class="btn btn-primary"  @click.prevent="getPage(1)"><i class="fa fa-search"></i> 查询</button>
		</div>
		</form>
		
		<div class="btn-group mb-2">                           <!-- //使用veu的语言格式绑定一个事件 prevent是销毁它的默认功能 -->
	  	<button id="bn-add" type="button" class="btn btn-primary" @click.prevent="openAddWin">
				<i class="fa fa-plus"></i> 增加
			</button>										<!-- //使用veu的语言格式绑定一个事件 prevent是销毁它的默认功能 -->
			<button id="bn-delete-multi" type="button" class="btn btn-danger" @click="execMultiDel" >
				<i class="fa fa-trash-o"></i> 多条删除
			</button>
		</div>
	
	
	
		<table class="table">
			<thead>
				<tr>
					<th><input type="checkbox" v-model="allChecked"/>  {{allChecked}}  </th>
					<th>工号</th><th>姓名</th><th>年龄</th><th>入职日期</th><th>工资</th><th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr v-for="emp in page.rows">
				<td><input type="checkbox" v-model="delIds" :value="emp.id" /></td>
					<td>{{emp.id}}</td>
					<td>{{emp.name}}</td>
					<td>{{emp.age}}</td>
					<td>{{emp.e_date_str}}</td>
					<td>{{emp.money}}</td>
					<td>
						<a href="#"  class="btn btn-primary btn-sm"  @click.prevent="openUpdateWin(emp)">修改</a>
						<a href="#"  class="btn btn-danger btn-sm"  @click.prevent="execDel(emp.id)">删除</a>
					</td>
				</tr>
			</tbody>
		</table>
		
		<nav>
		  <ul class="pagination">
		  	
		  	<li>
		  		<select v-model="query.pageSize" @change="onPageSizeChange" >
		  			<option v-for="n in pageList" >{{n}}</option>
		  		</select>
		  	</li>
		    <li class="page-item"><a class="page-link" href="#" @click.prevent="getPage(1)" >首页</a></li>
		    <li class="page-item"><a class="page-link" href="#" @click.prevent="getPage(page.pre)" >上页</a></li>
		    <li class="page-item"><a class="page-link" href="#" @click.prevent="getPage(page.next)" >下页</a></li>
		    <li class="page-item"><a class="page-link" href="#" @click.prevent="getPage(page.pgTotal)" >尾页</a></li>
		    
		    <li style="line-height:40px;">
		  		当前第{{page.curr}}页{{page.currSize}}条记录，共{{page.pgTotal}}页{{page.total}}条记录
		  	</li>
		    
		  </ul>
		</nav>
		
		
		
		<!-- 弹出添加窗口要显示的内容设置style为display隐藏  外边距为15px -->
	<div id="win-add" style="display:none;padding:15px;" >	
		<form>
		  <div class="form-group">
		    <label>姓名</label>
		    <input type="text" class="form-control" v-model="addemp.name" >
		  </div>
		   <div class="form-group">
		    <label>年龄</label>
		    <input type="number" class="form-control" v-model="addemp.age">
		  </div>
		  <div class="form-group">
		    <label>入职日期</label>
		    <input type="date" class="form-control" v-model="addemp.date" >
		  </div>
		  <div class="form-group">
		    <label>工资</label>
		    <input type="number" class="form-control" v-model="addemp.money" >
		  </div>
		  
		  <button id="bn-doadd" type="submit" class="btn btn-primary"  @click.prevent="execAdd">提交</button>
		</form>	
	</div>
		
		
		
		<!-- 弹出修改窗口要显示的内容 -->
	<div id="win-upd" style="display:none;padding:15px;" >
		
		<form>
		  <div class="form-group">
		    <label>工号</label>
		    <input type="text" class="form-control" v-model="updemp.id" readonly="readonly" >
		  </div>
		  <div class="form-group">
		    <label>姓名</label>
		    <input type="text" class="form-control" v-model="updemp.name" >
		  </div>
		   <div class="form-group">
		    <label>年龄</label>
		    <input type="number" class="form-control" v-model="updemp.age">
		  </div>
		  <div class="form-group">
		    <label>入职日期</label>
		    <input type="date" class="form-control" v-model="updemp.date" >
		  </div>
		  <div class="form-group">
		    <label>工资</label>
		    <input type="number" class="form-control" v-model="updemp.money" >
		  </div>
		  
		  <button id="bn-doupd" type="submit" class="btn btn-primary"  @click.prevent="execUpd">提交</button>
		</form>
	
	</div>
	
	
</div>

	<!-- 引入jQuery的js文件 -->
	<script src="js/jquery-3.3.1.slim.min.js"></script>
	<script src="js/popper.min.js"></script>	
	<script src="js/bootstrap.min.js"></script>
	<!-- 该js是来设置弹窗的 -->
	<script src="layer/layer.js"></script>
	<!-- Axios 是一个基于 promise 的 HTTP 库，和ajax用一样的功能 -->
	<script src="js/axios.min.js"></script>
	<!-- 这个是只关注于前端的一项js技术  和jQuery有一样的功能 -->
	<script src="js/vue.min.js"></script>
	<script src="js/my.js"></script>
	
	<script type="text/javascript" src="js/queryEmpool.js">	</script>
	

</body>
</html>



